<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
	<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<style>
.col-md-5 .table tbody tr td {
	padding: 3px;
}
</style>

<script type="text/javascript">
$(function () {                                                                
    $('#container1').highcharts({                                           
        chart: {                                                           
            type: 'bar'                                                    
        },                                                                 
        title: {                                                           
            text: '彩票分析助手'                    
        },                                                                 
        subtitle: {                                                        
            text: null                             
        },                                                                 
        xAxis: {                                                           
            categories: <?php echo $xAxis1 ; ?>,
            title: {                                                       
                text:'球号'                                            
            }                                                              
        },                                                                 
        yAxis: {                                                           
            min: 0,                                                        
            title: {                                                       
                text: '出现次数',                             
                align: 'high'                                              
            },                                                             
            labels: {                                                      
                overflow: 'justify'                                        
            }                                                              
        },                                                                 
        tooltip: {                                                         
            valueSuffix: ' 次'                                       
        },                                                                 
        plotOptions: {                                                     
            bar: {                                                         
                dataLabels: {                                              
                    enabled: true                                          
                }                                                          
            }                                                              
        },                                                                 
        legend: {                                                          
            layout: 'vertical',                                            
            align: 'right',                                                
            verticalAlign: 'top',                                          
            x: -40,                                                        
            y: 100,                                                        
            floating: true,                                                
            borderWidth: 1,                                                
            backgroundColor: '#FFFFFF',                                    
            shadow: true                                                   
        },                                                                 
        credits: {                                                         
            enabled: false                                                 
        },                                                                 
        series: [{                                                         
            name: '出现次数',                                             
            data: <?php echo $yAxis1 ; ?>                                   
        }]                                                                 
    });                                                                    
});
</script>
  </head>
  <body>

    <div class="container theme-showcase" role="main">

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h2>彩票分析助手</h2>
        <p>&nbsp; </p>

		<form class="form-horizontal" role="form" action="" type="get">
		  <div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">号码</label>
			<div class="col-sm-10">
			  <input type="text" name="number" class="form-control search-query input-medium" id="inputEmail3" placeholder="每个球之间用空格隔开" value="<?php echo @$number; ?>">
			</div>
		  </div>
		  <div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
			  <button type="submit" class="btn btn-default">搜索</button>
			</div>
		  </div>
		</form>

		<?php if(!empty($outs)): ?>
		<p><?php echo '共<span style="color:red;">'.count(@$outs).'</span>注选球:'; ?></p>
		<?php foreach($outs as $out): ?>
			<?php foreach($num_arr as $n): ?>
				<?php $out->qiuhao = str_replace($n,"<span style='color:black; background-image:url(../theme/images/ball_red.gif); width:20px;'>$n</span>",$out->qiuhao); ?>
			<?php endforeach; ?>
			<p><?php echo $out->qiuhao; ?></p>
		<?php endforeach; ?>
		<?php endif; ?>

      </div>

 <div id="container1" style="min-width:500px;height:710px"></div>

  <div class="row">
  	<table class="table  table-hover table-bordered">
      <tbody>
		<tr>
		<?php if(!empty($reds)): ?>
		<?php  foreach ($reds as $key => $red):  ?>
			<td><?php echo "<div style='color:black; background-image:url(../theme/images/ball_red.gif); width:24px;height:24px;padding:2px 4px;'>".$key."</div>" ; ?></td>
		<?php endforeach; ?>
		<?php endif; ?>
		</tr>

		<tr>
		<?php if(!empty($reds)): ?>
		<?php  foreach ($reds as $key => $red):  ?>
			<td><?php echo $red ; ?></td>
		<?php endforeach; ?>
		<?php endif; ?>
		</tr>

		<tr>
		<?php if(!empty($reds)): ?>
		<?php  foreach ($reds as $key => $red):  ?>
			<td><input type="checkbox" value=""></td>
		<?php endforeach; ?>
		<?php endif; ?>
		</tr>
      </tbody>
    </table>
  </div>

  <div class="row">
  <div class="col-md-5">
	<table class="table  table-hover table-bordered">
	<caption>红球区</caption>
      <thead>
        <tr>
          <th>球号</th>
          <th>出现次数</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
		<?php if(!empty($reds)): ?>
		<?php  foreach ($reds as $key => $red):  ?>
		<?php  
			if($key%4 == 0) $class="success" ;
			if($key%4 == 1) $class="info" ;
			if($key%4 == 2) $class="warning" ;
			if($key%4 == 3) $class="danger" ;
		?>
        <tr class="<?php echo $class; ?>">
          <td><?php echo "<div style='color:black; background-image:url(../theme/images/ball_red.gif); width:24px;height:24px;padding:2px 4px;'>".$key."</div>" ; ?></td>
          <td><?php echo $red ; ?></td>
          <td><input type="checkbox" value=""></td>
        </tr>
		<?php endforeach; ?>
		<?php endif; ?>
      </tbody>
    </table>
    </div>

    <div class="col-md-1"></div>

    <div class="col-md-5">
	<table class="table  table-hover table-bordered">
	<caption>蓝球区</caption>
      <thead>
        <tr>
          <th>球号</th>
          <th>出现次数</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
		<?php if(!empty($blues)): ?>
		<?php  foreach ($blues as $key => $blue):  ?>
		<?php  
			if($key%4 == 0) $class="success" ;
			if($key%4 == 1) $class="info" ;
			if($key%4 == 2) $class="warning" ;
			if($key%4 == 3) $class="danger" ;
		?>
        <tr class="<?php echo ''; ?>">
          <td><?php echo "<div style='color:black; background-image:url(../theme/images/ball_blue.gif); width:24px;height:24px;padding:2px 4px;'>".$key."</div>" ; ?></td>
          <td><?php echo $blue ; ?></td>
          <td><input type="checkbox" value=""></td>
        </tr>
		<?php endforeach; ?>
		<?php endif; ?>
      </tbody>
    </table>
    </div>

  </div>


</div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>
